<template>
    <div>
        <van-sticky>
            <van-nav-bar title="注册" left-text="返回" left-arrow @click-left="onClickLeft" right-text="登录"
                @click-right="onClickRight" />
        </van-sticky>
        <van-form validate-first @failed="onFailed" @submit="onSubmit">
            <!-- 通过 pattern 进行正则校验 -->
            <van-field v-model="username" label="用户名" name="username" placeholder="用户名"
                :rules="[{ pattern:/^[_$a-z][a-z0-9]{5,11}$/i, message: '用户名不能以数字开头,由数字字母_$组成,6-12位' }]" />
            <van-field v-model="nickName" label="昵称" name="nickName" placeholder="昵称" />
            <van-field v-model="sex" label="性别" name="sex" placeholder="性别" />
            <van-field v-model="phonenumber" label="手机号" name="phonenumber" placeholder="手机号"
                :rules="[{ pattern:/^1[3-9][0-9]{9}$/, message: '手机号格式有误' }]" />
            <van-field v-model="email" label="邮箱" name="email" placeholder="邮箱"
                :rules="[{ pattern:/^\w{6,12}@(qq|163)\.(com|cn|net)$/, message: '邮箱格式有误' }]" />
            <van-field v-model="password" type="password" label="密码" name="password" placeholder="密码"
                :rules="[{  pattern:/^[a-z0-9_$]{6,12}$/i, message: '密码由数字字母_$组成,6-12位'}]" />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">注册</van-button>
            </div>
        </van-form>
    </div>
</template>
<script>
import { userRegister } from "@/service/user/userLogin";
export default {
    data() {
        return {
            username: "",
            password: "",
            nickName: "",
            phonenumber: "",
            email: "",
            sex: "",
        }
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        onClickRight() {
            this.$router.push("/login");
        },
        async onSubmit(val) {
            console.log(val);
            let sex = val.sex == "男" ? "0" : "1";
            let { data } = await userRegister({
                userName: this.username,
                password: this.password,
                nickName: this.nickName,
                phonenumber: this.phonenumber,
                email: this.email,
                sex,
            })
            console.log(data);
            if (data.code == 200) {
                this.$toast.success("注册成功!");
                this.$router.push("/login");
            } else {
                this.$toast.fail(data.msg);
            }
        },
        onFailed() {

        }
    }
}

</script>